.page-body {

  // Sidebar Menu
  &.skin-aero {
    // Aero
    .xenon-sidebar-skin-variant(#558C89; #ECECEA; #FFF; #5f9a97; #558C89; #255e5b);
  }

  &.skin-navy {
    // Navy
    .xenon-sidebar-skin-variant(#2c3e50; #a7bfd6; #FFF; #34495e; #2c3e50; #ff4e50);
  }

  &.skin-facebook {
    // Facebook
    .xenon-sidebar-skin-variant(#3b5998; #8b9dc3; #FFF; #4160a0; #3b5998; #8b9dc3);
  }

  &.skin-turquoise {
    // Turquoise
    .xenon-sidebar-skin-variant(#16a085; #96ead9; #FFF; #1daf92; #16a085; #0f7e68);
  }

  &.skin-lime {
    // Lime
    .xenon-sidebar-skin-variant(#8cc657; #FFF; #FFF; #95cd62; #8cc657; #70a93c);
  }

  &.skin-green {
    // Green
    .xenon-sidebar-skin-variant(#27ae60; #a2f9c7; #FFF; #2fbd6b; #27ae60; #1c954f);
  }

  &.skin-purple {
    // Purple
    .xenon-sidebar-skin-variant(#795b95; #c2afd4; #FFF; #81629f; #795b95; #5f3d7e);
  }

  &.skin-white {
    // White
    .xenon-sidebar-skin-variant(#FFF; #666; #95cd62; #EEE; #95cd62; #555; #eee);
  }

  &.skin-concrete {
    // Concrete
    .xenon-sidebar-skin-variant(#a8aba2; #666; #a40f37; #b8bbb3; #a40f37; #323232);
  }

  &.skin-watermelon {
    // Watermelon
    .xenon-sidebar-skin-variant(#b63131; #f7b2b2; #FFF; #c03737; #b63131; #32932e);
  }

  &.skin-lemonade {
    // Lemonade
    .xenon-sidebar-skin-variant(#f5c150; #ffeec9; #FFF; #ffcf67; #f5c150; #d9a940);
  }


  // Horizontal Menu
  &.horizontal-menu-skin-aero {
    .xenon-horizontal-menu-skin-variant(#558C89; #ECECEA; #FFF; #5f9a97);
  }

  &.horizontal-menu-skin-navy {
    .xenon-horizontal-menu-skin-variant(#2c3e50; #a7bfd6; #FFF; #34495e);
  }

  &.horizontal-menu-skin-facebook {
    .xenon-horizontal-menu-skin-variant(#3b5998; #8b9dc3; #FFF; #4160a0);
  }

  &.horizontal-menu-skin-turquoise {
    .xenon-horizontal-menu-skin-variant(#16a085; #96ead9; #FFF; #1daf92);
  }

  &.horizontal-menu-skin-lime {
    .xenon-horizontal-menu-skin-variant(#8cc657; #FFF; #FFF; #95cd62);
  }

  &.horizontal-menu-skin-green {
    .xenon-horizontal-menu-skin-variant(#27ae60; #a2f9c7; #FFF; #2fbd6b);
  }

  &.horizontal-menu-skin-purple {
    .xenon-horizontal-menu-skin-variant(#795b95; #c2afd4; #FFF; #81629f);
  }

  &.horizontal-menu-skin-white {
    .xenon-horizontal-menu-skin-variant(#FFF; #666; #95cd62; #EEE);
  }

  &.horizontal-menu-skin-concrete {
    .xenon-horizontal-menu-skin-variant(#a8aba2; #666; #a40f37; #b8bbb3);
  }

  &.horizontal-menu-skin-watermelon {
    .xenon-horizontal-menu-skin-variant(#b63131; #f7b2b2; #FFF; #c03737);
  }

  &.horizontal-menu-skin-lemonade {
    .xenon-horizontal-menu-skin-variant(#f5c150; #ffeec9; #FFF; #ffcf67);
  }


  // User Info Navbar Menu
  &.user-info-navbar-skin-aero {
    .xenon-user-info-navbar-skin-variant(#558C89; #ECECEA; #FFF; #5f9a97);
  }

  &.user-info-navbar-skin-navy {
    .xenon-user-info-navbar-skin-variant(#2c3e50; #a7bfd6; #FFF; #34495e);
  }

  &.user-info-navbar-skin-facebook {
    .xenon-user-info-navbar-skin-variant(#3b5998; #8b9dc3; #FFF; #4160a0);
  }

  &.user-info-navbar-skin-turquoise {
    .xenon-user-info-navbar-skin-variant(#16a085; #96ead9; #FFF; #1daf92);
  }

  &.user-info-navbar-skin-lime {
    .xenon-user-info-navbar-skin-variant(#8cc657; #FFF; #FFF; #95cd62);
  }

  &.user-info-navbar-skin-green {
    .xenon-user-info-navbar-skin-variant(#27ae60; #a2f9c7; #FFF; #2fbd6b);
  }

  &.user-info-navbar-skin-purple {
    .xenon-user-info-navbar-skin-variant(#795b95; #c2afd4; #FFF; #81629f);
  }

  &.user-info-navbar-skin-white {
    .xenon-user-info-navbar-skin-variant(#FFF; #666; #95cd62; #EEE);
  }

  &.user-info-navbar-skin-concrete {
    .xenon-user-info-navbar-skin-variant(#a8aba2; #666; #a40f37; #b8bbb3);
  }

  &.user-info-navbar-skin-watermelon {
    .xenon-user-info-navbar-skin-variant(#b63131; #f7b2b2; #FFF; #c03737);
  }

  &.user-info-navbar-skin-lemonade {
    .xenon-user-info-navbar-skin-variant(#f5c150; #ffeec9; #FFF; #ffcf67);
  }
}


// Sidebar Skin
.xenon-sidebar-skin-variant(@bg-color; @text-color; @text-active-color; @border-color; @primary; @secondary; @scroll-color: #fff) {

  .btn-primary {
    background: @primary;

    &:hover {
      background: darken(@primary, 5%);
      border-color: darken(@primary, 5%);
    }

    &:active, &:focus {
      background: darken(@primary, 15%);
      border-color: darken(@primary, 15%);
    }
  }

  .btn {

    &.btn-secondary {
      .xenon-btn-style(@secondary, #FFF);
    }

  }

  .settings-pane {
    background: @border-color;
    color: @text-color;

    > a[data-toggle="settings-pane"] {
      color: @text-color;

      &:hover {
        color: #FFF;
      }
    }


    .user-info {

      .user-details {

        h3 {
          a {
            color: @text-active-color;
          }

          .user-status {
          }
        }

        .user-title {
          color: fade(@text-active-color, 65%);
        }

      }
    }

    .links-block {

      &.left-sep {
        border-left: 1px solid @bg-color;
      }

      h4 {
        color: @text-active-color;

        span {
          display: inline-block;
          border-bottom: 1px solid @border-color;
        }

        a {
          color: @text-active-color;

          &:hover {
            color: @text-color;
          }
        }
      }


      ul {

        li {

          a {
            color: @text-color;

            &:hover {
              color: @text-active-color;
            }
          }
        }
      }
    }

  }

  .sidebar-menu {
    background: @bg-color;

    .logo-env {
      border-bottom: 1px solid @border-color;

      .settings-icon {
        a {
          color: @text-color;

          &:hover {
            color: @text-active-color;
          }
        }
      }
    }


    // Main Menu
    .main-menu {
      // Links
      a {
        color: @text-color;
        border-bottom: 1px solid @border-color;

        &:hover {
          color: @text-active-color;
        }
      }

      // Active
      li.active > a {
        color: @text-active-color;
      }

      // With Subs
      li.has-sub {

        > a {

          &:before {
            color: lighten(@border-color, 25%);
          }
        }
      }
    }

    // Scrollbar
    .ps-scrollbar-x-rail .ps-scrollbar-x,
    .ps-scrollbar-y-rail .ps-scrollbar-y {
      background-color: @scroll-color;
    }


    // Collapsed sidebar
    @media screen and (min-width: @screen-sm) {

      &.collapsed {
        + .main-content {

          .user-info-navbar {

            .user-info-menu {

              a[data-toggle="sidebar"] {
                color: @userinfo-link-active-color;
              }
            }
          }
        }

        .main-menu {
          > li {
            &.active, li.active {
              background-color: darken(@bg-color, 3%);
            }

            > ul {
              background: @bg-color;
            }

          }
        }
      }
    }
  }

  .page-loading-overlay {
    background-color: @bg-color;
  }

  &.login-page {
    @main-border-color: lighten(#323435, 2%);

    background: @bg-color;
    color: #fff;

    .login-form {
      //background: lighten(@brand-primary, 1%);

      &.fade-in-effect {
        .form-group {
          @fg-delay: 150ms;

        }
      }

      .login-header {

        .logo {
          span {
            color: @text-color;
          }
        }

        p {
          color: @text-color;
        }
      }

      .form-group {
        .control-label {
          color: @text-color;
        }

        .form-control {
          &.input-dark {
            background: darken(@bg-color, 5%);
            border: 1px solid transparent;
            color: @text-color;
            .placeholder(@text-active-color);
          }

          &.error {
            border-color: fade(@brand-danger, 50%);
          }
        }

        .btn {
          &.btn-dark {
            border-color: @border-color;
            background-color: @bg-color;
            color: @text-active-color;

            &:hover {
              background-color: fade(@border-color, 30%);
            }
          }
        }
      }

      .login-footer {
        margin-top: 45px;

        a {
          color: @text-active-color;

          &:hover {
            color: lighten(@text-color, 15%);
          }
        }

        .info-links {
          @color: fade(@text-color, 70%);

          font-size: @font-size-small - 1;
          margin-top: @base-padding/2;
          color: @text-color;

          a {
            color: @text-color;

            &:hover {
              color: @text-active-color;
            }
          }
        }
      }
    }


    .external-login {
      position: relative;
      margin-bottom: @default-padding;
      padding: 0 @default-padding;

      a {
        display: block;
        color: #fff;
        background: @brand-primary;
        padding: @base-padding+3 @base-margin;
        font-size: @font-size-base + 2;
        margin-bottom: @base-padding;

        i {
          margin-right: @base-padding/2;
        }

        &:hover {
          background: lighten(@brand-primary, 10%);
        }

        &.facebook {
          @color: #3b5998;

          background-color: @color;

          &:hover {
            background-color: darken(@color, 10%);
          }
        }

        &.twitter {
          @color: #55acee;

          background-color: @color;

          &:hover {
            background-color: darken(@color, 10%);
          }
        }

        &.gplus {
          @color: #dd4b39;

          background-color: @color;

          &:hover {
            background-color: darken(@color, 10%);
          }
        }
      }
    }


    &.login-light {
      background: @background-color;

      .errors-container, .external-login {
        padding: 0;
      }

      .form-group {

        label.error {
          color: fade(@main-text-color, 80%);
        }
      }

      .login-form {
        background: #fff;
        color: @main-text-color;

        .login-footer {

          a {
            color: @secondary-color;

            &:hover {
              color: darken(@secondary-color, 10%);
            }
          }

          .info-links {
            @color: fade(@main-text-color, 70%);

            a {
              color: @color;

              &:hover {
                color: @main-text-color;
              }
            }
          }
        }
      }
    }

    @media screen and (max-width: @screen-sm) {
      padding-top: 0;

      .login-form,
      .errors-container,
      .external-login {
        padding-left: @base-padding;
        padding-right: @base-padding;
      }

      .errors-container {
        margin-top: @base-margin;
      }

      &.login-light {

        .login-form {
          padding-left: @default-padding;
          padding-right: @default-padding;
        }

        .errors-container,
        .external-login {
          padding-left: 0;
          padding-right: 0;
        }
      }

      .row {
        margin: 0;
      }
    }
  }

  &.lockscreen-page {
    background: @bg-color;

    .lockcreen-form {
      .form-group {
        p {
          color: @text-color;
        }

        h3 {
          color: @text-color;
        }

        .input-group {

          .form-control {
            border: 1px solid @border-color;
            .placeholder(fade(@text-active-color, 50%));
            color: @text-active-color;
          }

          .input-group-btn {

            .btn {
              color: @text-active-color;
              border: 1px solid @border-color;

              &:hover,
              &:focus {
                background-color: fade(@border-color, 30%);
              }
            }
          }
        }
      }

    }

  }

  &.settings-pane-open {

    .sidebar-menu {

      .sidebar-menu-inner {

        .logo-env {

          .settings-icon {
            background: @border-color;
            .box-shadow(~"0px 0px 0px 10px @{border-color}, 0px -10px 0px 10px @{border-color}, 0px -20px 0px 10px @{border-color}, 0px -30px 0px 10px @{border-color}");
          }
        }
      }
    }
  }
}


// Horizontal Menu
.xenon-horizontal-menu-skin-variant(@bg-color; @text-color; @text-active-color; @border-color) {

  .navbar {

    &.horizontal-menu {
      background: @bg-color;
      .box-shadow(none);


      .navbar-inner {
        .navbar-brand {
          .settings-pane-open & a[data-toggle="settings-pane"] {

            i {
              color: @text-color;
            }
          }

          a {
            &[data-toggle="settings-pane"] {
              i {
                color: @text-color;
              }

              &:hover {

                i {
                  color: @text-active-color;
                }
              }
            }
          }
        }

        @media screen and (min-width: @screen-sm) {

          .navbar-nav {
            &.click-to-expand {

              .has-sub {

                &:hover > a:before {
                  .rotate(0deg);
                }

                &.expanded > a:before {
                  .rotate(90deg);
                }
              }
            }

            a {
              color: @text-color;
            }

            li:hover > a,
            li.active > a {
              color: @text-active-color;
            }

            > li {
              border: 0px;

              &.active,
              &:hover {
                border-color: transparent;
                background-color: @border-color;
              }

              &.active {

                + li:hover {
                  border-left-color: transparent;
                }
              }

              > ul {
                border: none;
                .box-shadow(~"0 2px 8px rgba(0,1,1,.05)");
              }
            }


            // First Level
            ul {
              background: @border-color;

              > li {

                > a {
                  color: @text-color;

                  &:after {
                    background: lighten(@border-color, 5%);
                  }
                }

                &.active > a {
                  color: @text-active-color;
                  background: @bg-color;
                }

                &.has-sub {

                  > a {

                    &:before {
                      color: @text-color;
                    }
                  }
                }

                ul {
                  background: lighten(@border-color, 5%);
                  border-top: 1px solid lighten(@border-color, 8%);
                  border-bottom: 1px solid lighten(@border-color, 8%);

                  ul {
                    @bg: lighten(@border-color, 2%);
                    @border: lighten(@border-color, 4%);

                    background: @bg;
                    border-top-color: @border;
                    border-bottom-color: @border;

                    a:after {
                      background-color: @border;
                    }

                    ul {
                      @bg: lighten(@border-color, 4%);
                      @border: lighten(@border-color, 4%);

                      background: @bg;
                      border-top-color: @border;
                      border-bottom-color: @border;

                      a:after {
                        background-color: @border;
                      }

                    }
                  }
                }

              }
            }
          }

        }

        > .nav {

          > li {

            &:hover {
              background: @border-color;
            }

            i {
              color: @text-color;
            }

            > a {
              border: 0px;

              &:hover {
                background: @border-color;
                color: @text-active-color;

                i {
                  color: @text-active-color;
                }
              }

              &.notification-icon {

                &:before {
                  background: @secondary-color;
                }

                &:focus {
                  background: @border-color;
                }

                &.notification-icon-messages {

                  &:before {
                    background-color: @xe-purple;
                  }
                }
              }

              &[data-toggle="chat"] {
                i {

                  .chat-open & {
                    color: @text-active-color;
                  }
                }
              }
            }

            &.open > a.notification-icon {
              //background: @horizontal-menu-link-active-bg-color;
              background-color: @border-color;
              border-color: lighten(@border-color, 5%);
              color: @text-color;

              i {
                color: @text-active-color;
              }

              &:before {
                display: block;
              }
            }

            > ul {
              border-color: @border-color;
            }

            // User Profile
            &.user-profile {
              &:extend(.user-info-navbar .user-info-menu > li.user-profile all);

              > a {
                &:focus {
                  background-color: @border-color;
                }

                span {
                  color: @text-color;

                  &:hover {
                    color: @text-active-color;
                  }
                }

              }

              &.open > a {
                background-color: @border-color;
                border-color: @border-color;
              }
            }
          }
        }

      }
    }
  }

  .page-loading-overlay {
    background-color: @bg-color;
  }

  // Mobile
  @media screen and (max-width: @screen-sm) {
    .navbar {
      &.horizontal-menu {
        background: @bg-color;
        color: @text-color;

        .navbar-inner {
          > .navbar-nav {
            a {
              color: @text-color;
              border-color: @border-color;

              &:hover, &:active, &:focus {
                color: @text-active-color;
              }
            }
          }

          > .nav {
            &.navbar-mobile {
              a {
                color: @text-color;

                &:hover,
                &:active,
                &:focus {
                  color: @text-active-color;
                }

              }
            }
          }
        }
      }
    }
  }
}


// User Info Navbar Skins
.xenon-user-info-navbar-skin-variant(@bg-color; @text-color; @text-active-color; @border-color) {

  // User Info Navbar
  .user-info-navbar {
    background-color: @bg-color;

    .user-info-menu {

      // Root level
      > li {
        border: 0px solid transparent;


        &.hover-line {

          &:before {
            background: @text-color;
          }
        }

        > a {
          color: @text-color;
          border-bottom: 1px solid transparent;

          &:hover {
            color: @text-active-color;
          }
        }

        > form {
          border-bottom: 1px solid transparent;
        }

        // Search field
        &.search-form {

          .btn {
            color: @text-color;

            &:hover {
              color: @text-active-color;
            }

            &:active,
            &:focus {
              .box-shadow(none);
            }
          }

          .search-field {
            border: 1px solid @border-color;
            background: lighten(@background-color, 2%);
            .placeholder(@main-text-color);

            &:focus {
              + .btn {
                color: @text-active-color;
              }
            }
          }

        }


        // Toggled dropdown
        &.open {
          border-left-color: transparent;
          border-right-color: transparent;
          z-index: 15;

          > a {
            color: @text-active-color;
          }
        }

        // Dropdowns
        .dropdown-menu {
          background: @border-color;
          border: 1px solid transparent;

          .dropdown-menu-list {

            li {
              a {
                color: @text-color;;

                &:after {
                  background: lighten(@border-color, 5%);
                }

                &:hover {
                  color: @text-active-color;
                }
              }

              &.active {

                a {
                  color: @text-active-color;
                }
              }
            }
          }

          > .top {

            a {
              color: @text-color;

              &:hover {
                color: @text-active-color;
              }
            }

            p {
              color: @text-color;
              border-bottom: 1px solid lighten(@border-color, 5%);
            }
          }

          > .external {

            &:after {
              background-color: lighten(@border-color, 5%);
            }

            a {
              color: @text-color;
              background-color: lighten(@border-color, 5%);

              &:hover {
                color: @text-active-color;
              }
            }
          }

          &.messages {
            .dropdown-menu-list li {

              &:after {
                background-color: lighten(@border-color, 5%);
              }

              &.active:after {
                background-color: @brand-success;
              }
            }
          }

          &.notifications {

            .dropdown-menu-list {
              max-height: @userinfo-notifications-dropdown-height;

              > li {

                > a {

                  > i {
                    background: @border-color;
                    color: #FFF;
                  }

                  .line {
                    padding-left: 45px;
                  }
                }


                &.notification-secondary > a > i {
                  background-color: #FFF;
                  color: #444;
                  .box-shadow(0 0 0 1px #eee);
                }
              }
            }
          }

          &.user-profile-menu {

            li {

              a {
                color: @text-color;
                border-bottom: 1px solid lighten(@border-color, 5%);

                &:hover {
                  color: @text-active-color;
                }

              }

              &.last {
                background: lighten(@border-color, 5%);

                &:after {
                  background: lighten(@border-color, 5%);
                }

                > a {
                  border-bottom: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}